<template>
	<!-- 商品推荐 -->
	<div class="goods-block">
		<van-cell :title="title" icon="gift-o"></van-cell>
		<van-row type="flex" justify="center">
			<van-col span="7" class="goods-item" v-for="(item,i) in productItems" :key="i"
				@click="onDetail(item.product_id)">
				<!-- 图片 -->
				<van-image :src="APIDomainName + item.pic"></van-image>
				<!-- 商品名 -->
				<div class="van-ellipsis">{{item.title}}</div>
				<!-- 单价 -->
				<div class="price">￥{{item.price.toFixed(2)}}</div>
			</van-col>
		</van-row>
	</div>
</template>

<script>
	export default {
		name: 'homeProduct',
		props: {
			productItems: Array,
			title:String,
		},
		methods: {
			onDetail(id) {
				this.$router.push(`/product/detail/${id}`);
			}
		}
	}
</script>
<style scoped>
	.goods-block {
		background-color: #f0f1f4;
	}
	.van-cell {
		font-size: 16px;
		background-color: #e0e2e5;
	}

	.goods-item {
		display: flex;
		flex-direction: column;
		background-color: #fafcff;
		margin: 5px;
		padding: 5px;
		border-radius: 10px;
		font-size: 14px;
	}

	.price {
		font-size: 18px;
		font-weight: bold;
		color: red;
		text-align: right;
	}
</style>
